<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试结果 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/exam.css">
    <link rel="stylesheet" href="css/exam-result.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="sub-header">
            <a href="real-exam.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>考试结果</h1>
            <div class="header-action">
                <i class="fas fa-share-alt"></i>
            </div>
        </header>

        <!-- 考试基本信息 -->
        <section class="exam-info-card">
            <h2 class="exam-title">2022年上半年系统架构设计师考试真题</h2>
            <div class="exam-detail">
                <div class="detail-item">
                    <div class="item-label">用时</div>
                    <div class="item-value">01:45:30</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">得分</div>
                    <div class="item-value primary">68</div>
                </div>
                <div class="detail-item">
                    <div class="item-label">正确率</div>
                    <div class="item-value">76%</div>
                </div>
            </div>
        </section>

        <!-- 成绩分析 -->
        <section class="score-analysis">
            <div class="section-header">
                <h2 class="section-title">成绩分析</h2>
            </div>
            <div class="score-gauge-container">
                <div class="score-gauge">
                    <div class="gauge-value">68</div>
                    <div class="gauge-label">总分</div>
                    <svg viewBox="0 0 120 120" class="gauge-svg">
                        <circle cx="60" cy="60" r="54" fill="none" stroke="#e0e0e0" stroke-width="12"/>
                        <circle cx="60" cy="60" r="54" fill="none" stroke="#4a6bdf" stroke-width="12" 
                            stroke-dasharray="339.3" stroke-dashoffset="81.4" class="gauge-progress"/>
                    </svg>
                </div>
                <div class="score-details">
                    <div class="score-status success">
                        <i class="fas fa-check-circle"></i>
                        <span>通过</span>
                    </div>
                    <div class="score-comparison">
                        <div class="comparison-item">
                            <div class="comparison-label">平均分</div>
                            <div class="comparison-value">62</div>
                        </div>
                        <div class="comparison-item">
                            <div class="comparison-label">高于</div>
                            <div class="comparison-value accent">85%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="question-types-analysis">
                <div class="type-item">
                    <div class="type-header">
                        <div class="type-name">单选题</div>
                        <div class="type-score">24/30</div>
                    </div>
                    <div class="type-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 80%;"></div>
                        </div>
                        <div class="progress-percentage">80%</div>
                    </div>
                </div>
                <div class="type-item">
                    <div class="type-header">
                        <div class="type-name">多选题</div>
                        <div class="type-score">12/15</div>
                    </div>
                    <div class="type-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 80%;"></div>
                        </div>
                        <div class="progress-percentage">80%</div>
                    </div>
                </div>
                <div class="type-item">
                    <div class="type-header">
                        <div class="type-name">判断题</div>
                        <div class="type-score">8/10</div>
                    </div>
                    <div class="type-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 80%;"></div>
                        </div>
                        <div class="progress-percentage">80%</div>
                    </div>
                </div>
                <div class="type-item">
                    <div class="type-header">
                        <div class="type-name">案例分析题</div>
                        <div class="type-score">12/20</div>
                    </div>
                    <div class="type-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 60%;"></div>
                        </div>
                        <div class="progress-percentage">60%</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 知识点掌握情况 -->
        <section class="knowledge-mastery">
            <div class="section-header">
                <h2 class="section-title">知识点掌握情况</h2>
            </div>
            <div class="radar-chart-container">
                <canvas id="knowledge-radar"></canvas>
            </div>
            <div class="knowledge-list">
                <div class="knowledge-item">
                    <div class="knowledge-name">系统开发方法</div>
                    <div class="knowledge-progress">
                        <div class="progress-bar">
                            <div class="progress excellent" style="width: 90%;"></div>
                        </div>
                        <div class="mastery-level excellent">优秀</div>
                    </div>
                </div>
                <div class="knowledge-item">
                    <div class="knowledge-name">软件架构设计</div>
                    <div class="knowledge-progress">
                        <div class="progress-bar">
                            <div class="progress good" style="width: 75%;"></div>
                        </div>
                        <div class="mastery-level good">良好</div>
                    </div>
                </div>
                <div class="knowledge-item">
                    <div class="knowledge-name">分布式系统</div>
                    <div class="knowledge-progress">
                        <div class="progress-bar">
                            <div class="progress good" style="width: 70%;"></div>
                        </div>
                        <div class="mastery-level good">良好</div>
                    </div>
                </div>
                <div class="knowledge-item">
                    <div class="knowledge-name">安全性设计</div>
                    <div class="knowledge-progress">
                        <div class="progress-bar">
                            <div class="progress average" style="width: 60%;"></div>
                        </div>
                        <div class="mastery-level average">一般</div>
                    </div>
                </div>
                <div class="knowledge-item">
                    <div class="knowledge-name">项目管理</div>
                    <div class="knowledge-progress">
                        <div class="progress-bar">
                            <div class="progress weak" style="width: 45%;"></div>
                        </div>
                        <div class="mastery-level weak">薄弱</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 错题分析 -->
        <section class="wrong-analysis">
            <div class="section-header">
                <h2 class="section-title">错题分析</h2>
                <a href="#" class="more-link">查看全部 <i class="fas fa-angle-right"></i></a>
            </div>
            <div class="wrong-list">
                <div class="wrong-item">
                    <div class="question-number">12</div>
                    <div class="question-content">
                        <p class="question-text">在分布式系统中，负载均衡器的主要作用是？</p>
                        <div class="answer-info">
                            <div class="your-answer wrong">A. 提高系统安全性</div>
                            <div class="correct-answer">C. 分配请求流量</div>
                        </div>
                    </div>
                    <div class="question-action">
                        <a href="#" class="review-btn">复习</a>
                    </div>
                </div>
                <div class="wrong-item">
                    <div class="question-number">25</div>
                    <div class="question-content">
                        <p class="question-text">以下关于微服务架构的说法，错误的是？</p>
                        <div class="answer-info">
                            <div class="your-answer wrong">D. 微服务必须使用REST API</div>
                            <div class="correct-answer">B. 微服务之间应该共享数据库</div>
                        </div>
                    </div>
                    <div class="question-action">
                        <a href="#" class="review-btn">复习</a>
                    </div>
                </div>
                <div class="wrong-item">
                    <div class="question-number">43</div>
                    <div class="question-content">
                        <p class="question-text">敏捷开发方法的核心价值观不包括？</p>
                        <div class="answer-info">
                            <div class="your-answer wrong">C. 响应变化高于遵循计划</div>
                            <div class="correct-answer">A. 文档全面性高于工作软件</div>
                        </div>
                    </div>
                    <div class="question-action">
                        <a href="#" class="review-btn">复习</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 操作按钮区 -->
        <section class="result-actions">
            <button class="action-btn primary">
                <i class="fas fa-redo"></i>
                <span>重新做题</span>
            </button>
            <button class="action-btn secondary">
                <i class="fas fa-check-circle"></i>
                <span>查看答案解析</span>
            </button>
            <button class="action-btn outline">
                <i class="fas fa-exclamation-circle"></i>
                <span>只做错题</span>
            </button>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html" class="nav-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="profile.html" class="nav-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="js/exam-result.js"></script>
</body>
</html> 